<template>
  <div class="weather">
    <h2>{{searchText}} 天气详情</h2>
    <p>天气 {{weather.text}}</p>
    <p>体感温度 {{weather.feels_like}}</p>
    <p>风力 {{weather.wind_class}}</p>
    <button @click="setDefault">杭州天气</button>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { computed } from 'vue'

export default {
  setup() {
    const store = useStore()
    const setDefault = () => {
      store.commit('setSearch', '杭州')
      store.dispatch('getWeather', '杭州')
    }
    return {
      searchText: computed(() => store.getters.searchText),
      weather: computed(() => store.state.weather),
      setDefault
    }
  }
}
</script>

<style scoped>
.weather {
  border: 1px solid salmon;
  padding: 10px;
  margin: 30px;
}
</style>